<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2022-12-12 18:29:38
 * @LastEditors: Andy
 * @LastEditTime: 2023-01-13 18:41:03
-->
<template>
  <div class="menueTree">
    <template v-for="child in treeData">
      <div :key="child.id" class="menueTreeItem" v-if="child.children">
        <span> {{ child[defaultProps.label] }}</span>
        <menueTree :treeData="child.children" :key="child[defaultProps.value]"></menueTree>
      </div>
      <div v-else :key="child[defaultProps.value] + Math.random()" class="menueCheckbox">
        <el-checkbox :label="child[defaultProps.label]" v-model="child.isCheckBox"></el-checkbox>
      </div>
    </template>
  </div>
</template>
<script>
  export default {
    name: 'MenueTree',
    props: {
      treeData: {
        type: Array,
        default: () => []
      },
      defaultProps: {
        type: Object,
        default: () => ({ label: 'label', value: 'value' })
      }
    },
    activated() {
      this.loadMenuTree()
    },
    mounted() {
      this.loadMenuTree()
    },
    methods: {
      // loadMenuTree() {
      //   apiGetMenuTree().then(({ data }) => {
      //     this.functionTreeOptions = data?.length
      //       ? JSON.parse(
      //           JSON.stringify(data)
      //             .replace(/menuName/g, 'label')
      //             .replace(/id/g, 'value')
      //         )
      //       : []
      //   })
      // }
    }
  }
</script>
<style scoped>
  .menueCheckbox {
    display: inline-block;
    padding: 10px 20px;
  }

  .menueTree {
    margin-left: 20px;
    padding: 10px 20px;
  }
</style>
